import React, { Component } from "react";
import "./App.css";

import {
  HashRouter as Router,
  Route,
  NavLink,
  Switch,
  Redirect,
} from "react-router-dom";

const Home = () => <h2>Home组件</h2>;
const About = () => <h2>About组件</h2>;
const NotFoundPage = () => <h2>404</h2>;

export default class App extends Component {
  render() {
    return (
      <Router>
        <ul>
          <li>
            <NavLink to="/home">home</NavLink>
          </li>
          <li>
            <NavLink to="/about">about</NavLink>
          </li>
        </ul>

        <Switch>
          <Route path="/home" component={Home}></Route>
          <Route path="/about" component={About}></Route>
          <Route path="/404" component={NotFoundPage}></Route>
          {/* 设置默认的显示路由 */}
          <Redirect to="/home" from="/"></Redirect>
          <Redirect to="/404"></Redirect>
        </Switch>
      </Router>
    );
  }
}
